<template>
  <div class="record">
    <el-table
        :data="tableData"
        style="width: 100%;height: 340px;">
      <el-table-column
          type="index"
          :index="indexMethod">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="电话">
      </el-table-column>
      <el-table-column
          prop="userName"
          label="用户名">
      </el-table-column>
      <el-table-column
          prop="creatDate"
          label="申请时间">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        small
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="allInfo.pageNum"
        :page-size="allInfo.pageSize"
        :total="allInfo.total">
    </el-pagination>

    <el-dialog
        title="认证"
        :visible.sync="centerDialogVisible"
        width="50%"
        center>

      <div style="width: 100%;display: flex;flex-direction: column;">
        <div style="width: 100%;height: 40px;justify-content: flex-start;align-items: center">
          <span>用户名：{{ msg.userName }}</span>&nbsp;&nbsp;
          <span>手机号：{{ msg.phone }}</span>
        </div>
        <div style="width: 100%;justify-content: flex-start;align-items: center">
          <img height="100px" width="80px" style="margin-right: 5px" v-for="(item,index) in msg.checkArr"
               @click="show(item)" :key="index" :src="item"/>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="del()">确 定</el-button>
      </span>
    </el-dialog>

    <div id="maskSelf" v-if="isPay" @click="isPay = false,detail=''">
      <img height="100%" :src="detail">
    </div>
  </div>
</template>

<script>
export default {
  name: "ManageDoctor",
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 5
      },
      tableData: [],
      allInfo: {},
      centerDialogVisible: false,
      userId: "",
      msg: {},
      isPay: false,
      detail: ""
    }
  },
  mounted() {
    this.get()
  },
  methods: {
    del() {


      let msg = JSON.parse(JSON.stringify(this.msg))
      delete msg["checkArr"]
      this.$http.put("/admin/setDoctor?phone=" + msg.phone + "&id=" + msg.id).then(res => {
        if (res.code == 200) {
          this.$message.success("成功")
          this.centerDialogVisible = false
          this.get()
        }
      })
    },
    show(d) {
      this.detail = d
      this.isPay = !this.isPay;
    },
    handleClick: async function (row) {
      let that = this
      new Promise(resolve => {
        let check = row.checkPath
        let checkArr = check.split(",");
        let arr = []
        checkArr.filter(async i => {
          await this.getimg(i).then(r => {
            arr.push(r)
          })
        })
        resolve(arr)
      }).then(arr => {
        row.checkArr = arr
        console.log(row)
        this.msg = row
      }).then(() => {
        setTimeout(function () {
          that.open()
        }, 1000)
      })
    },
    open() {
      this.centerDialogVisible = true
    },
    getimg(id) {
      return new Promise(resolve => {
        this.$http({
          url: "/file/img/" + id,
          method: "get",
          responseType: "arraybuffer",
        }).then(res => {
          let bytes = new Uint8Array(res);
          let storeData = "";
          let len = bytes.byteLength;
          for (let i = 0; i < len; i++) {
            storeData += String.fromCharCode(bytes[i]);
          }
          let database = "data:image/png;base64," + window.btoa(storeData);
          resolve(database);
        });
      })
    },
    get() {
      this.$http.post("/admin/pageDoctor", this.page).then(async data => {
        let res = data.data.list
        this.tableData = res
        this.allInfo = data.data
      })
    },
    getUserBasicsInfo(id) {
      return new Promise(resolve => {
        this.$http.get("/user/getUserBasicsInfo/" + id).then(data => {
          resolve(data.data)
        })
      })
    },
    // 监听页数变化
    handleSizeChange(pageSie) {
      this.page.pageSize = pageSie
      this.get()
    },
    // 监听当前页变化
    handleCurrentChange(PageNum) {
      this.page.pageNum = PageNum
      this.get()
    },
    indexMethod(index) {
      return index + 1;
    },
  }
}
</script>

<style scoped>
#maskSelf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999;
  background: rgba(0, 0, 0, 0.3);
}


.record {
  width: 980px;
  float: right;
}
</style>